import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/colors/my_colors.dart';
import 'package:flutter_app/model/my_item_model.dart';
import 'package:flutter_app/screen_page.dart' as prefix0;

class MyPage extends StatelessWidget {
  List<MyItemModel> list = List<MyItemModel>();

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        appBar: PreferredSize(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: _top(context),
          ),
          preferredSize: Size(double.infinity, prefix0.height(182)),
        ),
        body: Container(
          child: ListView(
            physics: NeverScrollableScrollPhysics(),
            children: <Widget>[
              SizedBox(height: prefix0.height(16)),
              _myIdol(),
              SizedBox(height: prefix0.height(16)),
              _bottomItem(),
            ],
          ),
        ),
      ),
    );
  }

//头部
  _top(BuildContext context) {
    return Container(
      height: prefix0.height(182),
      child: Stack(
        children: <Widget>[
          Image.asset(
            "images/beijing.png",
            fit: BoxFit.fill,
            width: prefix0.width(375),
            height: prefix0.height(180),
          ),
          Positioned(
              right: prefix0.height(27),
              width: prefix0.width(13),
              child: SafeArea(
                child: Container(
                  height: prefix0.height(40),
                  width: prefix0.width(40),
                  child: InkWell(
                    onTap: () {},
                    child: Image.asset("images/shezhi.png"),
                  ),
                ),
              )),
          Positioned(
            bottom: prefix0.height(77),
            child: Container(
              padding: EdgeInsets.only(
                  left: prefix0.width(12), right: prefix0.width(12)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  _headImage(),
                  SizedBox(width: prefix0.width(11)),
                  _titleImage(),
                  //
                ],
              ),
            ),
          ),
          Positioned(
              right: prefix0.width(20),
              bottom: prefix0.height(87),
              child: _rightImage()),
          Positioned(
            bottom: 0,
            left: prefix0.width(12),
            child: Container(
              width: prefix0.width(351),
              height: prefix0.height(60),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(prefix0.height(5)),
                  color: Colors.white),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text("关注",
                            style: TextStyle(
                                fontSize: prefix0.sp(14),
                                color: MyColors.font_black)),
                        Text("206",
                            style: TextStyle(
                                fontSize: prefix0.sp(14),
                                color: MyColors.font_gray)),
                      ],
                    ),
                  ),
                  Container(
                    color: MyColors.back_bright_gray,
                    height: prefix0.height(27),
                    width: prefix0.width(1),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("粉丝",
                          style: TextStyle(
                              fontSize: prefix0.sp(14),
                              color: MyColors.font_black)),
                      Text("206",
                          style: TextStyle(
                              fontSize: prefix0.sp(14),
                              color: MyColors.font_gray)),
                    ],
                  ),
                  Container(
                    color: MyColors.back_bright_gray,
                    height: prefix0.height(27),
                    width: prefix0.width(1),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("积分",
                          style: TextStyle(
                              fontSize: prefix0.sp(14),
                              color: MyColors.font_black)),
                      Text("206",
                          style: TextStyle(
                              fontSize: prefix0.sp(14),
                              color: MyColors.font_gray)),
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  //头像
  _headImage() {
    return Container(
        width: prefix0.width(76),
        height: prefix0.width(76), //这里必须设置成width不然搭边不圆，是插件的bug
        decoration: BoxDecoration(
            border: Border.all(
                color: MyColors.white_bright_bg, width: prefix0.width(2)),
            borderRadius: BorderRadius.circular(prefix0.width(40))),
        child: CircleAvatar(
          child: FadeInImage.assetNetwork(
            placeholder: "images/touxiang.png",
            image: "",
            fit: BoxFit.fill,
          ),
        ));
  }

  //昵称和图标
  _titleImage() {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("卡卡文艺大叔",
              style: TextStyle(fontSize: prefix0.sp(15), color: Colors.white)),
          SizedBox(height: prefix0.height(20)),
          Row(
            children: <Widget>[
              Image.asset("images/xingbie_my.png"),
              SizedBox(width: prefix0.width(5)),
              Image.asset("images/huiyuan_my.png"),
            ],
          ),
        ],
      ),
    );
  }

//右边箭头和签到
  _rightImage() {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Image.asset("images/bangdan_jinru.png"),
          SizedBox(height: prefix0.height(20)),
          Row(
            children: <Widget>[
              Image.asset("images/qiandao.png"),
              SizedBox(width: prefix0.width(5)),
              Text("签到",
                  style:
                      TextStyle(fontSize: prefix0.sp(14), color: Colors.white))
            ],
          ),
        ],
      ),
    );
  }

  //我的爱豆
  _myIdol() {
    return Container(
      padding: EdgeInsets.all(prefix0.height(12)),
      margin:
          EdgeInsets.only(left: prefix0.width(12), right: prefix0.width(12)),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(prefix0.height(5)),
      ),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text("我的爱豆",
                  style: TextStyle(
                      fontSize: prefix0.sp(14), color: MyColors.font_black)),
              Image.asset(
                "images/fabudongtai_jinru.png",
                width: prefix0.width(15),
                height: prefix0.width(15),
              ),
            ],
          ),
          SizedBox(height: prefix0.height(10)),
          Container(
            height: prefix0.height(1),
            color: MyColors.back_bright_gray,
          ),
          SizedBox(height: prefix0.height(10)),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Image.asset("images/vip.png"),
                  SizedBox(height: prefix0.height(8)),
                  Text("会员",
                      style: TextStyle(
                          fontSize: prefix0.sp(14),
                          color: MyColors.font_black)),
                ],
              ),
              Column(
                children: <Widget>[
                  Image.asset("images/xiaoxi.png"),
                  SizedBox(height: prefix0.height(8)),
                  Text("消息",
                      style: TextStyle(
                          fontSize: prefix0.sp(14),
                          color: MyColors.font_black)),
                ],
              ),
              Column(
                children: <Widget>[
                  Image.asset("images/dongtai.png"),
                  SizedBox(height: prefix0.height(8)),
                  Text("动态",
                      style: TextStyle(
                          fontSize: prefix0.sp(14),
                          color: MyColors.font_black)),
                ],
              ),
              Column(
                children: <Widget>[
                  Image.asset("images/shoucang.png"),
                  SizedBox(height: prefix0.height(8)),
                  Text("收藏",
                      style: TextStyle(
                          fontSize: prefix0.sp(14),
                          color: MyColors.font_black)),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }

  _bottomItem() {
    list.add(MyItemModel("images/qianbao.png", "钱包"));
    list.add(MyItemModel("images/dingdanguanli.png", "订单管理"));
    list.add(MyItemModel("images/fenxiangyouli.png", "分享有礼"));
    list.add(MyItemModel("images/yijianfankui.png", "意见反馈"));
    list.add(MyItemModel("images/my_yingyuan.png", "我的应援"));
    return Container(
      margin:
          EdgeInsets.only(left: prefix0.width(12), right: prefix0.width(12)),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(prefix0.height(5)),
      ),
      child: Text(
          "底部") /*StaggeredGridView.countBuilder(
        shrinkWrap: true,
        //多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView （需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响
        primary: false,
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 6,
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) =>
            _girdItem(list[index]),
        staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      )*/
      ,
    );
  }

  _girdItem(MyItemModel model) {
    return Container(
      height: prefix0.height(80),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(model.image),
          SizedBox(height: prefix0.height(8)),
          Text(model.title,
              style: TextStyle(
                  fontSize: prefix0.sp(14), color: MyColors.font_black))
        ],
      ),
    );
  }
}
